<template>
  <div>
    <el-card>
      <!-- 选择开始时间和结束时间-->
      <el-row :gutter="10">
        <el-col :span="5">
          <span>开始时间</span>
          <el-time-picker
            v-model="value1"
            :picker-options="{
              selectableRange: '18:30:00 - 20:30:00',
            }"
            placeholder="请选择开始时间"
          ></el-time-picker>
        </el-col>
        <el-col :span="5">
          <span>结束时间</span>
          <el-time-picker
            arrow-control
            v-model="value2"
            :picker-options="{
              selectableRange: '18:30:00 - 20:30:00',
            }"
            placeholder="请选择结束时间"
          ></el-time-picker>
        </el-col>
        <el-col :span="1">
          <!-- 查询按钮 -->
          <el-button
            style="background-color: #353535; color: white"
            size="small"
            >查询</el-button
          >
        </el-col>
      </el-row>

      <!-- 日志信息列表 -->
      <div class="diary_information">日志信息列表</div>
      <!-- 列表 -->
      <el-table :data="tableData" style="width: 100%" stripe>
        <el-table-column
          prop="date"
          label="平台版本"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="版本内容"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="address"
          label="发布时间"
          align="center"
        ></el-table-column>
      </el-table>

      <!-- 分页条 -->
      <el-row :gutter="10" class="pagination">
        <el-col :span="12">
          <span>第1页，共10709条数据，跳转第1页，确定</span>
        </el-col>
        <el-col :span="12">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="1000"
          ></el-pagination>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "VersionUpdateChild",
  data() {
    return {
      value1: "",
      value2: "",
      //   表格数据
      tableData: [
        {
          date: "v2.0.3",
          name:
            "添加自定义参考系相关功能﹔添加静态数据统计分析相关功能﹔修复因网络资源库更新导致报表模板失效BUG",
          address: "2018-10-15",
        },
        {
          date: "v2.0.2",
          name:
            "修复角色权限管理功能﹔添加调整监测体自定义设置选项﹔添加分页页面指定跳转功能。",
          address: "2018-09-30",
        },
        {
          date: "v2.0.1",
          name:
            "雨量显示及统计相关BUG修复;深部位移相关显示效果调整及功能添加。",
          address: "2018-09-15",
        },
        {
          date: "v2.0.0",
          name:
            "平台数据统计算法优化﹔添加版本更新日志;添加ES数据下载功能﹔调整部分页面显示效果;修复了一些BUG。",
          address: "2018-08-31",
        },
      ],
      // 当前页数
      currentPage: 1,
      // 当前页面条数
      currentSize: 10,
    };
  },
  methods: {
    handleSizeChange: function () {},
    handleCurrentChange: function () {},
  },
};
</script>

<style scoped>
.el-card {
  height: 820px;
}
.diary_information {
  background-color: #f2f2f2;
  height: 30px;
  margin: 20px 0 0 0;
}
.el-pagination {
  float: right;
}
.pagination .el-col {
  margin: 20px 0 0 0;
}
.el-table::before {
  z-index: inherit;
}
</style>
